<template>
  <div class="pagewrap">
    <div class="top1">
      <div class="bk">
        <div class="conts">
          <div class="wenzis">
            <span class="one">由金融机构发起的跨行电票贴现官方经纪平台</span>
            <span class="two">长三角票据经纪服务平台</span>
          </div>
          <div class="zn">
            <div>
              <span class="link-right">智能撮合</span>
              <span class="link-right">安全认证</span
              ><span class="link-right">在线签约</span><span>跨域贴现</span>
            </div>
          </div>
        </div>
        <!-- <div class="conts2">
          <div class="y1">
            <span class="link-left">银票价格计算</span>
          </div>
          <div class="y2">
            <el-form
              :inline="true"
              :model="commResult"
              :rules="rules"
              ref="commResult"
              class="demo-form-inline"
              label-width="180px"
            >
              <el-form-item prop="acceptor">
                <el-input
                  v-model="commResult.acceptor"
                  placeholder="请输入承兑行行号"
                  maxlength="12"
                  @keyup="
                    formInline.acceptor = formInline.acceptor.replace(/[^\d.]/g, '')
                  "
                ></el-input>
              </el-form-item>
              <el-form-item prop="billMoney">
                <el-input
                 maxlength="8"
                 oninput="value=value.replace(/[^\d.]/g,'')"
                  v-model="commResult.billMoney"
                  placeholder="请输入票面金额"
                ></el-input>
              </el-form-item>
              <el-form-item prop="expireTime">
                <el-date-picker
                  v-model="commResult.expireTime"
                  type="date"
                  :editable="false"
                  placeholder="选择日期"
                >
                </el-date-picker>
              </el-form-item>
              <el-form-item>
                <el-button type="warning" @click="onSubmit(commResult)"
                  >立即试算</el-button
                >
              </el-form-item>
            </el-form>
          </div>
          <div class="y3">
            <span>*试算结果仅为参考,以实际询价结果为准</span>
          </div>
        </div> -->
      </div>
    </div>
    <div class="top2">
      <div class="pt">
        <img src="../../assets/jian2.png" alt="" />
        <span class="ptys">平台优势</span>
        <img src="../../assets/jian1.png" alt="" />
      </div>
      <div class="All">
        <div class="tu">
          <img src="../../assets/tu2.png" alt="" />
          <div>
            <span class="zn2">智能</span>
            <div class="heng"></div>
          </div>
          <div>
            <span class="dj">多家银行智能匹配</span>
          </div>
          <div class="dj2">
            <span class="dj">一键查询最优价格</span>
          </div>
        </div>
        <div class="tu">
          <img src="../../assets/tu2.png" alt="" />
          <div>
            <span class="zn2">安全</span>
            <div class="heng"></div>
          </div>

          <div>
            <span class="dj">区块链技术保障</span>
          </div>
          <div class="dj2">
            <span class="dj">交易数据安全加密</span>
          </div>
        </div>

        <div class="tu">
          <img src="../../assets/tu2.png" alt="" />
          <div>
            <span class="zn2">高效</span>
            <div class="heng"></div>
          </div>
          <div>
            <span class="dj">从发布到交易全流程服务</span>
          </div>
          <div class="dj2">
            <span class="dj">始终致力底层性能研究</span>
          </div>
        </div>
        <div class="tu">
          <img src="../../assets/tu2.png" alt="" />
          <div>
            <span class="zn2">便捷</span>
            <div class="heng"></div>
          </div>
          <div>
            <span class="dj">数据银行同时在线比价</span>
          </div>
          <div class="dj2">
            <span class="dj">即时询价 快捷交易</span>
          </div>
        </div>
      </div>
    </div>
    <div class="top3">
      <div class="pt2">
        <img src="../../assets/jian2.png" alt="" />
        <span class="ptys">票据撮合交易流程</span>
        <img src="../../assets/jian1.png" alt="" />
      </div>
      <div class="ch">
        <img src="../../assets/lc.png" alt="" />
      </div>
    </div>
    <div class="top4">
      <div class="pt2">
        <img src="../../assets/jian2.png" alt="" />
        <span class="ptys">联盟成员</span>
        <img src="../../assets/jian1.png" alt="" />
      </div>
      <div class="hh">
        <img src="../../assets/z1.png" alt="" />
        <img src="../../assets/z2.png" alt="" />
        <img src="../../assets/z3.png" alt="" />
        <img src="../../assets/z4.png" alt="" />
        <img src="../../assets/z5.png" alt="" />
        <img src="../../assets/z6.png" alt="" />
        <img src="../../assets/z8.png" alt="" />
      </div>
    </div>
  </div>
</template>

<script>
import { dateFormat } from "@/utils/date";
import { getRecommendResult, creatAPPSy } from "@/api/leagues/app";
export default {
  data() {
    return {
      activeName: "first",
      input: "",
      input2: "",
      input1: "",
      commResult: {
        acceptor: "",
        billMoney: "",
        expireTime: "",
      },

      rules: {
        acceptor: [
          {
            required: true,
            message: "请输入承兑行行号长度12个字符",
            min: 12,
            max: 12,
            trigger: "blur",
          },
        ],
        billMoney: [
          { required: true, message: "请输入票面金额", trigger: "blur" },
        ],
        expireTime: [
          {
            required: true,
            message: "请输入到期日",
            trigger: "change",
          },
        ],
      },
    };
  },

  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    onSubmit() {
      this.$refs.commResult.validate((valid) => {
        if (valid) {
          this.commResult.expireTime = dateFormat(
            this.commResult.expireTime,
            "YYYY-MM-DD HH:mm:ss"
          );
          creatAPPSy(this.commResult).then((response) => {
            if (response) {
              let listss = response.data.data;
              this.$router.push({
                path: "/page2",
                query: listss,
              });
              // this.commResult = response.data.data;
              console.log(response.data.msg, "response.data.msg");
              // this.$message.success(response.data.msg);
            } else {
              this.$message.success(response.data.msg);
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>
<style scoped>
.heng {
  border-bottom: 3px solid #0075ff;
  width: 29px;
  margin: auto;
}
.ptys {
  font-size: 33px;
  font-weight: bold;
  color: #051232;
}
.pt {
  text-align: center;
}
.ch {
  background: #ffffff;
}
.ch img {
  text-align: center;
  width: 50%;
  height: 50%;
}
.top2 {
  font-size: 40px;
}
.hh {
  width: 1000px;
  margin: auto;
}
.hh img {
  width: 224px;
}
.top3 {
  margin-top: 20px;
  /* height: 650px; */
  text-align: center;
}
.top4 {
  margin-top: 20px;
  height: 300px;
  /* text-align: center; */
}
.ch {
  margin-top: 50px;
}
.pt2 {
  height: 60px;
  font-size: 40px;
  font-weight: bold;
  color: #2c3e5c;
  text-align: center;
}
.All {
  text-align: center;
  margin-top: 3%;
}
.tu {
  width: 277px;
  height: 359px;
  background: #ffffff;
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.06);
  border-radius: 6px;
  display: inline-table;
}
.zn2 {
  width: 49px;
  height: 24px;
  font-size: 20px;
  text-align: center;
  font-weight: bold;
  color: #0075ff;
  line-height: 51px;
}
.dj {
  width: 159px;
  /* height: 49px; */
  font-size: 20px;
  font-weight: 400;
  color: #9498b6;
  /* line-height: 39px; */
  text-align: center;
}
.dj2 {
  margin-top: -21px;
}
.tu img {
  width: 276.05px;
  height: 191.1px;
}
.top1 {
  width: 100%;
  /* height: 700px; */
}
.bk {
  height: 667px;
  background: url("../../assets/bk.png") no-repeat center -65px;
  background-size: inherit;
  /* background-position:center center; */
}
.conts {
  margin: 0 auto;
  width: 1200px;
  padding-top: 5%;
}
.conts2 {
  margin: 100px auto 0;
  width: 1200px;
  padding: 13px 51px;
}
.el-button--warning {
  color: #fff !important;
  background-color: #fe680e !important;
  border-color: #fe680e !important;
  width: 270px !important;
  height: 50px !important;
  margin-top: -3px !important;
}
.wenzis {
  display: inline-grid;
}
/*画一条再右边的竖线*/
.link-right {
  width: 50px;
  height: 20%;
  border-right: solid #ffffff 1px;
}
.link-left {
  border-left: solid #fe680e 2px;
}
.y1 span {
  padding-left: 6px;
  font-size: 20px;
  font-weight: bold;
  color: #ffffff;
}
.one {
  font-size: 23px;
  font-weight: 400;
  color: #b6f2ff;
  line-height: 100px;
}

.zn {
  width: 351px;
  height: 41px;
  background: rgba(0, 216, 255, 0.2);
  border: 1px solid #00d8ff;
  /* opacity: 0.7; */
  filter: brightness(1);
  margin-top: 3px;
  text-align: center;
}
.zn span {
  width: 314px;
  height: 16px;
  font-size: 16px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: #ffffff;
  line-height: 40px;
  padding: 7px;
}
.y2 {
  margin-top: 2%;
}
.y3 {
  height: 12px;
  font-size: 12px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  font-style: italic;
  color: #ffffff;
  line-height: 24px;
  opacity: 0.5;
}
.two {
  font-size: 55px;
  font-weight: bold;
  color: #ffffff;
  line-height: 100px;
  margin-top: -31px;
}
</style>
